/**
 * Created by 86185 in 2020/9/3 on 21:18
 */
import React from "react"

import "@/components/common/HotPlaceList/HotPlaceList.component.styl"

import RScrollbar from "@/components/common/RScrollbar/RScrollbar.component"

class HotPlaceList extends React.Component {
    constructor(props) {
        super(props);
    }

    listScrollToBottom(){
        console.log("我到底部了");
    }

    render() {
        const {list} = this.props.hotPlaceData;
        const listBody = _.map(list, (item, index) => {
            return <div className="row" key={index}>
                <span className="column index">{index + 1}</span>
                <span className="column name ell">{item.name}</span>
                <span className="column yy">{item.yyCount.toLocaleString()}</span>
                <span className="column sd">{item.sdCount.toLocaleString()}</span>
            </div>
        })

        return (
            <div className="hot-place-list">
                <div className="list-head">
                    <span className="column">排名</span>
                    <span className="column">景区名称</span>
                    <span className="column">预约游客</span>
                    <span className="column">实到游客</span>
                </div>
                <div className="list-body">
                    <RScrollbar scrollToBottom={this.listScrollToBottom}>
                        {listBody}
                    </RScrollbar>
                </div>
            </div>
        )
    }
}

export default HotPlaceList
